import 'package:flutter/material.dart';

class buttonDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: new Text("Button按钮"),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            new Text(
              "RaisedButton是一个凸起的按钮（也可称为漂浮按钮）默认自带阴影和灰色背景，按下后阴影变大",
              textAlign: TextAlign.center,
              style: TextStyle(
                  color: hexToColor("#333333"), fontSize: 16.0, height: 1.2),
            ),
            RaisedButton(
              onPressed: () {},
              child: Text("RaisedButton"),
            ),
            new Text(
              "FlatButton是一个扁平按钮，默认背景透明并不带阴影，按下后会有背景色",
              textAlign: TextAlign.start,
              style: TextStyle(
                  color: hexToColor("#333333"), fontSize: 16.0, height: 1.2),
            ),
            FlatButton(onPressed: () {}, child: Text("FlatButton")),
            new Text(
              "OutlineButton是一个默认有边框，不带阴影且背景透明，按下后边框颜色会变亮，同时出现背景和阴影",
              textAlign: TextAlign.start,
              style: TextStyle(
                  color: hexToColor("#333333"), fontSize: 16.0, height: 1.2),
            ),
            OutlineButton(onPressed: () {}, child: Text("OutlineButton")),
            new Text(
              "IconButton是一个可点击的Icon,不包括文字，默认没有背景，点击后会出现背景",
              textAlign: TextAlign.start,
              style: TextStyle(
                  color: hexToColor("#333333"), fontSize: 16.0, height: 1.2),
            ),
            IconButton(
                icon: Icon(Icons.assignment_turned_in), onPressed: () {}),
            new Text(
              "带图标的按钮，RaisedButton,FlatButton,OutlineButton都有一个icon构造函数，通过它可以轻松的创建带图标的按钮",
              textAlign: TextAlign.start,
              style: TextStyle(
                  color: hexToColor("#333333"), fontSize: 16.0, height: 1.2),
            ),
            new Row(
              children: <Widget>[
                RaisedButton.icon(
                    onPressed: () {},
                    icon: Icon(Icons.send),
                    label: Text("发送")),
                FlatButton.icon(
                    onPressed: () {}, icon: Icon(Icons.add), label: Text("添加")),
                OutlineButton.icon(
                    onPressed: () {}, icon: Icon(Icons.info), label: Text("详情"))
              ],
            ),
            /**
             * const FlatButton({
             * ...
             * @required this.onPressed, //按钮点击回调
             * this.textColor, //按钮文字颜色
             * this.disabledTextColor, //按钮禁用时的文字颜色
             * this.color, //按钮背景颜色
             * this.disabledColor,//按钮禁用时的背景颜色
             * this.highlightColor, //按钮按下时的背景颜色
             * this.splashColor, //点击时，水波动画中水波的颜色
             * this.colorBrightness,//按钮主题，默认是浅色主题
             * this.padding, //按钮的填充
             * this.shape, //外形
             * @required this.child, //按钮的内容
             * })
             */
            new Text(
              "自定义按钮外观",
              textAlign: TextAlign.start,
              style: TextStyle(
                  color: hexToColor("#333333"), fontSize: 16.0, height: 1.2),
            ),
            FlatButton(
                color: Colors.red,
                highlightColor: Colors.red[700],
                //按下去的样子
                splashColor: Colors.grey,
                //点击是水波动画中的颜色
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(20.0)),
                onPressed: () {},
                child: Text(
                  "Submit",
                  style:
                      TextStyle(color: hexToColor("#FFFFFF"), fontSize: 16.0),
                ))
          ],
        ),
      ),
    );
  }

  Color hexToColor(String s) {
    // 如果传入的十六进制颜色值不符合要求，返回默认值
    if (s == null ||
        s.length != 7 ||
        int.tryParse(s.substring(1, 7), radix: 16) == null) {
      s = '#999999';
    }
    return new Color(int.parse(s.substring(1, 7), radix: 16) + 0xFF000000);
  }
}
